<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>卡片笔记系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            padding: 30px;
            color: #333;
        }
        
        .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        
        header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
        }
        
        h1 {
            font-size: 2.8rem;
            margin-bottom: 10px;
            color: #2c3e50;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: #7f8c8d;
            max-width: 700px;
            margin: 0 auto 30px;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .btn {
            padding: 12px 25px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 4px 10px rgba(52, 152, 219, 0.3);
        }
        
        .btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4);
        }
        
        .btn.delete {
            background: #e74c3c;
            box-shadow: 0 4px 10px rgba(231, 76, 60, 0.3);
        }
        
        .btn.delete:hover {
            background: #c0392b;
            box-shadow: 0 6px 15px rgba(231, 76, 60, 0.4);
        }
        
        .btn.new {
            background: #2ecc71;
            box-shadow: 0 4px 10px rgba(46, 204, 113, 0.3);
        }
        
        .btn.new:hover {
            background: #27ae60;
            box-shadow: 0 6px 15px rgba(46, 204, 113, 0.4);
        }
        
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            padding: 10px;
        }
        
        .card {
            width: 100%;
            height: 0;
            padding-bottom: 133.33%; /* 3:4比例 */
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: white;
        }
        
        .card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
        }
        
        .card-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 25px;
            display: flex;
            flex-direction: column;
        }
        
        .card-header {
            border-bottom: 2px solid #eee;
            padding-bottom: 15px;
            margin-bottom: 15px;
        }
        
        .card-title {
            font-size: 1.6rem;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        
        .card-subtitle {
            font-size: 1rem;
            color: #7f8c8d;
            font-weight: 500;
        }
        
        .card-body {
            flex: 1;
            overflow-y: auto;
            padding-right: 5px;
        }
        
        /* 滚动条样式 */
        .card-body::-webkit-scrollbar {
            width: 6px;
        }
        
        .card-body::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }
        
        .card-body::-webkit-scrollbar-thumb {
            background: #bdc3c7;
            border-radius: 10px;
        }
        
        .card-body::-webkit-scrollbar-thumb:hover {
            background: #95a5a6;
        }
        
        .card-list {
            list-style-type: none;
            margin: 15px 0;
        }
        
        .card-list li {
            padding: 8px 0;
            padding-left: 30px;
            position: relative;
            font-size: 1rem;
            line-height: 1.5;
        }
        
        .card-list li:before {
            content: "•";
            position: absolute;
            left: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: #3498db;
            font-size: 1.5rem;
        }
        
        .card-quote {
            background: #f8f9fa;
            border-left: 4px solid #3498db;
            padding: 15px 20px;
            margin: 15px 0;
            border-radius: 0 8px 8px 0;
            font-style: italic;
            color: #555;
            position: relative;
        }
        
        .card-quote:before {
            content: "“";
            position: absolute;
            top: -15px;
            left: 5px;
            font-size: 3rem;
            color: #3498db;
            opacity: 0.2;
            font-family: Georgia, serif;
        }
        
        .card-footer {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #eee;
            color: #95a5a6;
            font-size: 0.9rem;
            display: flex;
            justify-content: space-between;
        }
        
        /* 卡片模板样式 */
        .template-1 {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
        }
        
        .template-2 {
            background: linear-gradient(135deg, #fff9db 0%, #ffec99 100%);
        }
        
        .template-3 {
            background: linear-gradient(135deg, #e3fafc 0%, #c5f6fa 100%);
        }
        
        .template-4 {
            background: linear-gradient(135deg, #fff0f6 0%, #ffdeeb 100%);
        }
        
        .template-5 {
            background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
        }
        
        .template-2 .card-title {
            color: #e67700;
        }
        
        .template-3 .card-title {
            color: #0b7285;
        }
        
        .template-4 .card-title {
            color: #a61e4d;
        }
        
        .template-5 .card-title {
            color: #495057;
        }
        
        .template-2 .card-list li:before {
            color: #e67700;
        }
        
        .template-3 .card-list li:before {
            color: #0b7285;
        }
        
        .template-4 .card-list li:before {
            color: #a61e4d;
        }
        
        .template-5 .card-list li:before {
            color: #495057;
        }
        
        .template-2 .card-quote {
            border-left-color: #e67700;
        }
        
        .template-3 .card-quote {
            border-left-color: #0b7285;
        }
        
        .template-4 .card-quote {
            border-left-color: #a61e4d;
        }
        
        .template-5 .card-quote {
            border-left-color: #495057;
        }
        
        /* 删除按钮 */
        .delete-card {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: rgba(231, 76, 60, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            z-index: 10;
        }
        
        .card:hover .delete-card {
            opacity: 1;
        }
        
        .delete-card:hover {
            background: rgba(231, 76, 60, 0.8);
        }
        
        .delete-card i {
            color: #e74c3c;
            font-size: 14px;
        }
        
        .delete-card:hover i {
            color: white;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .cards-container {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
            
            h1 {
                font-size: 2.2rem;
            }
        }
        
        @media (max-width: 480px) {
            .controls {
                flex-direction: column;
                align-items: center;
            }
            
            .cards-container {
                grid-template-columns: 1fr;
            }
            
            .btn {
                width: 100%;
                max-width: 300px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>卡片笔记系统</h1>
            <p class="subtitle">使用3:4比例的竖版卡片整理您的想法、笔记和灵感。支持标题、副标题、列表、引用等模块。</p>
            
            <div class="controls">
                <button class="btn new" id="addCard">
                    <i class="fas fa-plus"></i> 添加新卡片
                </button>
                <button class="btn delete" id="deleteAll">
                    <i class="fas fa-trash"></i> 删除所有卡片
                </button>
            </div>
        </header>
        
        <div class="cards-container" id="cardsContainer">
            <!-- 卡片将通过JavaScript动态添加 -->
        </div>
    </div>

    <script>
        // 卡片模板数据
        const cardTemplates = [
            {
                title: "项目计划",
                subtitle: "网站重构项目",
                content: `
                    <ul class="card-list">
                        <li>完成用户需求分析文档</li>
                        <li>设计新的UI组件库</li>
                        <li>重构核心模块代码</li>
                        <li>进行性能测试与优化</li>
                        <li>准备部署到生产环境</li>
                    </ul>
                    <div class="card-quote">
                        优秀的项目计划是成功的一半，确保每个阶段都有明确的交付成果。
                    </div>
                `,
                date: "2023-10-15",
                templateClass: "template-1"
            },
            {
                title: "学习清单",
                subtitle: "前端开发技能提升",
                content: `
                    <ul class="card-list">
                        <li>深入学习Vue 3 Composition API</li>
                        <li>掌握CSS Grid高级布局技巧</li>
                        <li>学习WebGL基础知识</li>
                        <li>了解前端性能优化策略</li>
                        <li>实践TypeScript高级类型</li>
                    </ul>
                    <div class="card-quote">
                        持续学习是保持竞争力的关键，每天至少投入1小时学习新技术。
                    </div>
                `,
                date: "2023-10-10",
                templateClass: "template-2"
            },
            {
                title: "会议记录",
                subtitle: "产品设计讨论会",
                content: `
                    <ul class="card-list">
                        <li>确定新版本核心功能</li>
                        <li>讨论用户反馈与改进点</li>
                        <li>分配UI设计任务</li>
                        <li>制定下阶段开发计划</li>
                        <li>安排下次会议时间</li>
                    </ul>
                    <div class="card-quote">
                        设计应以用户为中心，每个功能都应解决用户的实际问题。
                    </div>
                `,
                date: "2023-10-05",
                templateClass: "template-3"
            },
            {
                title: "读书笔记",
                subtitle: "《设计心理学》",
                content: `
                    <ul class="card-list">
                        <li>可视性原则：让用户知道如何操作</li>
                        <li>反馈原则：操作后提供明确反馈</li>
                        <li>限制因素：引导用户正确操作</li>
                        <li>一致性：保持设计模式统一</li>
                        <li>容错性：防止错误并允许撤销</li>
                    </ul>
                    <div class="card-quote">
                        好的设计是看不见的设计，当产品符合用户的心理模型时，用户甚至不会注意到设计的存在。
                    </div>
                `,
                date: "2023-09-28",
                templateClass: "template-4"
            },
            {
                title: "旅行计划",
                subtitle: "日本京都之旅",
                content: `
                    <ul class="card-list">
                        <li>参观伏见稻荷大社的千本鸟居</li>
                        <li>体验岚山竹林小径</li>
                        <li>品尝京都传统怀石料理</li>
                        <li>游览金阁寺与清水寺</li>
                        <li>体验传统茶道文化</li>
                    </ul>
                    <div class="card-quote">
                        旅行不是到达目的地，而是享受沿途的风景和文化体验。
                    </div>
                `,
                date: "2023-11-20",
                templateClass: "template-5"
            }
        ];

        const cardsContainer = document.getElementById('cardsContainer');
        const addCardBtn = document.getElementById('addCard');
        const deleteAllBtn = document.getElementById('deleteAll');

        // 初始化卡片
        function initCards() {
            cardsContainer.innerHTML = '';
            cardTemplates.forEach((card, index) => {
                createCard(card, index);
            });
        }

        // 创建卡片元素
        function createCard(cardData, index) {
            const card = document.createElement('div');
            card.className = `card ${cardData.templateClass}`;
            card.innerHTML = `
                <div class="delete-card" data-index="${index}">
                    <i class="fas fa-times"></i>
                </div>
                <div class="card-content">
                    <div class="card-header">
                        <h2 class="card-title">${cardData.title}</h2>
                        <p class="card-subtitle">${cardData.subtitle}</p>
                    </div>
                    <div class="card-body">
                        ${cardData.content}
                    </div>
                    <div class="card-footer">
                        <span>${cardData.date}</span>
                        <span>卡片笔记</span>
                    </div>
                </div>
            `;
            cardsContainer.appendChild(card);
            
            // 添加删除事件
            const deleteBtn = card.querySelector('.delete-card');
            deleteBtn.addEventListener('click', () => {
                cardTemplates.splice(index, 1);
                initCards();
            });
        }

        // 添加新卡片
        addCardBtn.addEventListener('click', () => {
            const randomTemplate = Math.floor(Math.random() * 5) + 1;
            
            const newCard = {
                title: "新卡片",
                subtitle: "点击编辑内容",
                content: `
                    <ul class="card-list">
                        <li>示例列表项1</li>
                        <li>示例列表项2</li>
                        <li>示例列表项3</li>
                    </ul>
                    <div class="card-quote">
                        这是一个引用示例，您可以在这里添加重要的信息或名言。
                    </div>
                `,
                date: new Date().toISOString().slice(0, 10),
                templateClass: `template-${randomTemplate}`
            };
            
            cardTemplates.push(newCard);
            createCard(newCard, cardTemplates.length - 1);
        });

        // 删除所有卡片
        deleteAllBtn.addEventListener('click', () => {
            if (confirm('确定要删除所有卡片吗？此操作不可撤销。')) {
                cardTemplates.length = 0;
                cardsContainer.innerHTML = '<p class="empty-message">没有卡片，请点击"添加新卡片"按钮创建</p>';
            }
        });

        // 初始化
        initCards();
    </script>
</body>
</html>